import React, { useRef, useEffect } from "react";

export default (): JSX.Element => {
  const domRef = useRef<HTMLDivElement>(null);

  return <div style={{lineHeight: '30px', color: '#fff'}}>
    <p>3243423423423</p>
    <div onClick={(e) => {console.log(2234234234234324, e)}} ref={domRef}>234344</div>
    <button onClick={() => {
      domRef.current?.attachShadow({mode: 'open'})
      let shadowDom = domRef.current?.shadowRoot
      let dom = document.createElement('p')
      dom.innerHTML = '12312312312312'
      let styleDom = document.createElement('style')
      dom.onclick = (e) => {console.log(23234, e)} 
      styleDom.innerHTML = `
        p {
          color: red
        }
      `
      shadowDom?.appendChild(styleDom)
      shadowDom?.appendChild(dom)
    }}>点击</button>
  </div>;
};
